/* The popup modal banner (background) */
.popup-banner {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 990; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The popup modal banner content */
.popup-banner-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 15px;

    /* Resize and center the popup-content based on the image size */
    width: auto; /* Adjust width to image width */
    height: auto; /* Adjust height to image height */
    max-width: 90%; /* Limit width to viewport */
    max-height: 90%; /* Limit height to viewport */
    position: fixed; /* Fixed position */
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    transform: translate(-50%, -50%); /* Adjust position based on size */
    overflow: auto;
}

@media (max-width: 991px) {
    .popup-banner-content {
      background-color: #fefefe;
      padding: 20px;
      border: 1px solid #888;
      border-radius: 15px;
      /* Resize and center the popup-content based on the image size */
      width: 100%; /* Adjust width to image width */
      height: auto; /* Adjust height to image height */
      max-width: 90%; /* Limit width to viewport */
      max-height: 90%; /* Limit height to viewport */
      position: fixed; /* Fixed position */
      left: 50%; /* Center horizontally */
      top: 50%; /* Center vertically */
      transform: translate(-50%, -50%); /* Adjust position based on size */
      overflow: auto;
  }
}
/* The image inside the popup-content */
.popup-banner-content img {
    max-width: 100%; /* Limit image width to viewport */
    max-height: 100%; /* Limit image height to viewport */
    object-fit: contain; /* Scale image down while preserving aspect ratio */
    object-position: center; /* Position image at the center of the container */
}

/* The close button */
.close-btn {
  color: #aaa;
  /* float: right; */
  /* font-size: 28px; */
  font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.disrig {
  -webkit-user-drag: none; /* Untuk Chrome dan Safari */
  user-drag: none;
}